<template>
  <div class="boss">
    <Top></Top>
    <Banner id="4"></Banner>
    <chamber></chamber>
    <!-- 入驻总区域 -->
    <div class="Bottom">
      <Head title="商会入驻(条件)"> </Head>
      <div class="top title-center war">
        <div class="wen richText area-center m-t-0" v-html="content"></div>
      </div>
      <div class="area-center">
        <!-- 商会入驻条件 -->

        <!-- 填写信息区域 -->
        <div class="xinxi p-10-0">
          <div class="h3">商会入驻填写以下信息</div>

          <van-form
            validate-first
            ref="addchamber"
            id="addchamber"
            @submit="submit"
            @failed="failed"
          >
            <!-- 商会名称 -->
            <van-field
              required
              v-model="username"
              name="chamberName"
              label="商会名称:"
              placeholder="商会名称"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '商会名称不能为空',
                },
              ]"
            />
            <!-- 商会成立时间 -->
            <van-field
              required
              v-model="usertime"
              name="chamberDate"
              label="成立时间:"
              placeholder="成立时间"
              @click="showTime = true"
            />
            <van-popup v-model="showTime" position="bottom">
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择成立时间"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="Chambertime"
                @cancel="showTime = false"
              />
            </van-popup>
            <!-- 商会地址 -->
            <van-field
              required
              readonly
              clickable
              name="picker"
              :value="area"
              label="所在地址:"
              placeholder="选择所在地址"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
              <van-area
                columns-num="2"
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showPicker = false"
              />
            </van-popup>
            <!-- 商会邮箱 -->
            <van-field
              required
              name="chamberEmail"
              v-model="email"
              label="邮箱:"
              placeholder="邮箱"
              clearable
              :rules="[
                {
                  required: true,
                  message: '请填写您的邮箱！',
                },
                {
                  pattern:
                    /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
                  message: '邮箱格式错误！',
                },
              ]"
            />
            <!-- 商会邮箱 -->
            <van-field
              required
              name="chamberMan"
              v-model="chamberMan"
              label="联系方式:"
              placeholder="请输入联系方式"
              clearable
              :rules="[
                {
                  required: true,
                  message: '请输入联系方式',
                },
                {
                  pattern: /(^(\d{3,4}-)?\d{7,8})$|(^1[3|4|5|6|7|8|9]\d{9}$)/,
                  message: '格式错误，请输入固定电话或手机号',
                },
              ]"
            />
            <!-- 商会人数 -->
            <van-field
              required
              name="chamberNum"
              label="商会人数:"
              placeholder="商会人数"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '商会人数规模不能为0和负数',
                  pattern: /^((?!0)\d+(\.\d{1,2})?)$/g,
                },
              ]"
            >
              <template #input>
                <van-stepper v-model="userperson" />
              </template>
            </van-field>
            <!-- 商会类型 -->
            <van-field
              required
              readonly
              clickable
              name="chambertypeId"
              :value="type"
              label="商会类型:"
              placeholder="选择商会类型"
              @click="showType = true"
            />
            <van-popup v-model="showType" position="bottom">
              <van-picker
                show-toolbar
                value-key="chambertypeName"
                :columns="list"
                @confirm="typeConfirm"
                @cancel="showType = false"
              />
            </van-popup>

            <van-field
              required
              v-model="chamberIntroduce"
              name="chamberIntroduce"
              label="商会简介:"
              type="textarea"
              placeholder="请输入商会简介"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '商会简介不能为空',
                },
              ]"
            />
            <!-- 会长-->
            <!-- <van-field
              required
              v-model="president"
              name="userName"
              label="会长:"
              placeholder="会长"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '商会会长不能为空',
                },
              ]"
            /> -->
            <!-- 会长电话-->
            <!-- <van-field
              required
              name="userTel"
              v-model="phonenumber"
              :rules="[
                {
                  required: true,
                  message: '请填写您的手机号码！',
                },
                {
                  pattern: /^1[3456789]\d{9}$/,
                  message: '手机号码格式错误！',
                },
              ]"
              type="tel"
              label="会长电话:"
              placeholder="会长号码"
              clearable
            /> -->
            <!-- 会长微信 -->
            <!-- <van-field
              required
              v-model="presidentwechat"
              name="userWeChat"
              label="会长微信:"
              placeholder="会长微信"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '商会微信不能为空',
                },
              ]"
            /> -->
            <!-- 常务会长 -->
            <van-field
              required
              v-model="chairman"
              name="chairmanName"
              label="常务会长:"
              placeholder="常务会长"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '常务会长不能为空',
                },
              ]"
            />
            <!-- 常务会长电话 -->
            <van-field
              required
              name="chairmanTel"
              v-model="chairmanphone"
              :rules="[
                {
                  required: true,
                  message: '请填写您的手机号码！',
                },
                {
                  pattern: /^1[3456789]\d{9}$/,
                  message: '手机号码格式错误！',
                },
              ]"
              type="tel"
              label="常务会长电话"
              placeholder="常务会长电话"
              clearable
            />
            <!-- 常务会长微信 -->
            <van-field
              required
              v-model="chairmantwechat"
              name="chairmanWeChat"
              label="常务会长微信"
              placeholder="常务会长微信"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '常务会长微信不能为空',
                },
              ]"
            />
            <!-- 秘书长 -->
            <van-field
              required
              v-model="general"
              name="secretaryName"
              label="秘书长:"
              placeholder="秘书长"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '秘书长不能为空',
                },
              ]"
            />
            <!-- 秘书长电话 -->
            <van-field
              required
              v-model="generalphone"
              name="secretaryTel"
              label="秘书长电话:"
              placeholder="秘书长电话"
              :rules="[
                {
                  required: true,
                  message: '请填写您的手机号码！',
                },
                {
                  pattern: /^1[3456789]\d{9}$/,
                  message: '手机号码格式错误！',
                },
              ]"
            />
            <!-- 秘书长微信 -->
            <van-field
              required
              v-model="generalwechat"
              name="secretaryWeChat"
              label="秘书长微信:"
              placeholder="秘书长微信"
              :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '秘书长微信不能为空',
                },
              ]"
            />
            <!-- 经办人 -->
            <van-field
              required
              v-model="handled"
              name="handledName"
              label="经办人:"
              placeholder="经办人"
            />
            <!-- 经办人电话 -->
            <van-field
              required
              v-model="handledphone"
              name="handledTel"
              label="经办人电话:"
              placeholder="经办人电话"
              :rules="[
                {
                  validator: handledValidator,
                  message: '手机号码格式错误！',
                },
              ]"
            />
            <!-- 经办人微信 -->
            <van-field
              required
              v-model="handledwechat"
              name="handledWeChat"
              label="经办人微信:"
              placeholder="经办人微信"
            />
            <!-- 商会商标-->

            <van-field required name="chamberLogo" label="商会商标">
              <template #input>
                <van-uploader
                  max-count="1"
                  accept="image/*"
                  v-model="chamberuploader"
                  :after-read="afterRead"
                  :before-read="beforeRead"
                />
              </template>
            </van-field>
            <!-- 社团组织许可证 -->
            <van-field required name="chamberLicence" label="社团组织证照">
              <template #input>
                <van-uploader
                  max-count="1"
                  accept="image/*"
                  v-model="ganizations"
                  :after-read="afterReadLicence"
                  :before-read="beforeRead"
                />
              </template>
            </van-field>
            <!-- 推荐人 -->
            <van-field
              v-model="message"
              rows="2"
              autosize
              label="推荐人:"
              name="chamberPs"
              type="textarea"
              maxlength="100"
              placeholder="请输入推荐人"
              show-word-limit
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>

          <div class="bold-size">
            注:上述信息完整后,平台审核3-5个工作日,若通过即与贵会联系,免费移交后台源代码，协助搭建商会小程序。
          </div>
          <div class="bold-size m-t-20">
            商会入驻类别包括：
            <p>●各商会（企业社团组织）</p>
            <p>●异地驻福州商会</p>
            <p>●各行业协会（企业社团组织）</p>
            <p>●教育培训院校（幼儿园例外）</p>
            <p>●其他各会（非关联企业社团除外）</p>
            <p class="m-t-10">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;咨询电话:400-1921-7-1
            </p>
            <p class="m-t-10">&nbsp;&nbsp;&nbsp;&nbsp;附：商会入驻和退出协议</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Top from "@/components/Home/TopPage.vue";
import Banner from "@/components/Home/BannerView.vue";
import chamber from "@/components/Home/CommCe.vue";
import Head from "@/components/public/HeadPage.vue";
import { ChamberTypeList } from "@/api/index";
import { fileUpload } from "@/api/common";
import { addChambers, getTTreatment } from "@/api/chambe";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      // username: '',
      time: "",
      address: "",
      showTime: false, //时间选择显示
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      username: "", //商会名称
      usertime: "", //商会成立时间
      area: "", //商会地址

      areaList,
      showPicker: false,
      showType: false,
      chamberLogo: "", // 商会图标
      licence: "", // 社团许可证
      userperson: 1, //商会人数
      member: "", //商会会员
      chamberMan: "", // 联系方式
      chamberIntroduce: "", //商会简介
      email: "", //电子邮箱
      chambertypeId: "", //商会类型
      president: "", //商会会长
      phonenumber: "", //商会会长电话
      presidentwechat: "", //商会会长微信
      chairman: "", //常务会长
      chairmanphone: "", //常务会长电话
      chairmantwechat: "", //常务会长微信
      general: "", //秘书长
      generalphone: "", //秘书长电话
      generalwechat: "", //秘书长微信
      handled: "", //经办人
      handledphone: "", //经办人电话
      handledwechat: "", //经办人微信
      chamberuploader: [], //商会商标
      ganizations: [], //社团组织许可证
      message: "", //备注
      type: "",
      radi: "", //商会类型的空格
      list: [], //商会类型
      content: "",
    };
  },
  created() {
    //商会入驻的商会类型
    ChamberTypeList().then((res) => {
      // console.log(res.data);
      this.list = res.data;
    });
    getTTreatment({
      treatmentName: "商会入驻",
    }).then((res) => {
      this.content = this.dataHTML(res.data);
    });
  },
  methods: {
    //省份
    onConfirm(value) {
      this.address = value;
      this.area = value[0].name + "-" + value[1].name;
      this.showPicker = false;
    },
    // 提交添加商会请求
    submit(data) {
      let provincial = this.address[0].name.split("省")[0];
      provincial = provincial.split("市")[0];
      provincial = provincial.split("区")[0];
      data.chamberProvincial = provincial;
      data.chamberCity = this.address[1].name;
      data.chambertypeId = this.chambertypeId;
      data.chamberLogo = this.chamberLogo;
      data.chamberLicence = this.licence;
      addChambers(data).then((res) => {
        this.$toast({
            message: res.data.msg,
            icon:"fail"
         });
        if (res.data.code == 200) {
          this.$toast({
            message: "添加商会成功！",
            icon: "success",
          });
          // 重置表单
          document.getElementById("addchamber").reset();
          this.chamberuploader = [];
          this.ganizations = [];
          this.$refs.addchamber.resetValidation();
        }
      });
    },
    // 提交失败回调
    failed(data) {
      this.$refs.addchamber.scrollToField(data.errors[0].name);
    },
    //选择商会成立时间
    Chambertime(val) {
      this.usertime = this.getDateTime(val);
      this.showTime = false;
    },
    // 商会类型选择
    typeConfirm(val) {
      this.type = val.chambertypeName;
      this.chambertypeId = val.chambertypeId;
      this.showType = false;
    },
    // 商标图片处理
    afterRead(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      fileUpload(formData).then((res) => {
        if (res.data.code == 200) {
          this.chamberLogo = res.data.data;
        }
      });
    },
    // 社团许可证图片处理
    afterReadLicence(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      fileUpload(formData).then((res) => {
        if (res.data.code == 200) {
          this.licence = res.data.data;
        }
      });
    },
    beforeRead(file) {
      if (!["image/jpeg", "image/png", "image/jpg"].includes(file.type)) {
        this.$toast("请上传 jpg/png/jpeg 格式图片");
        return false;
      }
      let isLt1M = file.size / 1024 / 1024 <= 5;
      if (!isLt1M) {
        this.$toast("图片大小5M以内");
        return false;
      }
      return true;
    },
    selectClass(event) {
      this.selectClassEnd = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称
    },
    handledValidator(val) {
      if (val) {
        return /^1[3456789]\d{9}$/.test(val);
      } else {
        return true;
      }
    },
  },
  components: {
    Top,
    Banner,
    chamber,
    Head,
  },
};
</script>
  
  <style scoped>
/* 大盒子区域 */
.boss {
  width: 100%;
  background-color: #f0eff5;
}
/* 招聘总区域 */
.Bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 版心区域 */
.van-cell {
  font-size: 0.2rem;
  font-weight: 300;
}
/* 商会入驻条件 */
.top {
  background-color: white;
}
h3 img {
  width: 0.23rem;
  margin-right: 0.05rem;
}

/* 填写信息区域 */
.xinxi {
  width: 100%;
  min-height: 2rem;
  margin-top: 0.05rem;
  background-color: white;
}
.xinxi .h3 {
  text-align: center;
  line-height: 0.3rem;
}
.shanghui {
  margin-top: 30px;
}
h5 {
  margin-top: 0.1rem;
}
.van-radio:last-child {
  margin-top: 0.05rem;
}
.van-ellipsis:focus:before {
  content: none;
}
.memberGrade .van-ellipsis:empty:before {
  content: "请选择（必填）"; /* element attribute*/
  color: #c8c9cc;
}
.van-dropdown-menu__item {
  width: 200px;
  height: 200px;
}
::v-deep .van-field__label {
  color: #000;
}
</style>